<!--
* @Author: GaoXu
* @Date: 2024/7/18 21:30
* @Description:   告警趋势图表
-->
<template>
  <div class="alarm-trend-chart" ref="alarmTrendChart"></div>
</template>

<script lang="ts" setup>
  import { ref, watch, nextTick } from 'vue';
  import * as echarts from 'echarts';
  import { fontSize } from '/@/utils/echartsRem';
  import { defHttp } from '/@/utils/http/axios';
  import { warnDayStatistic } from '/@/api/remoteOverview/api-remoteOverview';

  const props = defineProps({
    // 作业面id
    workAreaId: {
      type: String,
      default: '',
    },
    // 作业面id
    stationId: {
      type: String,
      default: '',
    },
    // 页面类型【全部, PLC, 网络设备】
    activeKey: {
      type: String,
      default: '',
    },
    // 时间范围
    dateRange: {
      type: Array,
      default: () => [],
    },
  });
  // 监听作业面
  watch(
    () => props.workAreaId,
    (value) => {
      nextTick(() => {
        init();
      });
    },
    {
      immediate: true,
    },
  );
  // 监听站场
  watch(
    () => props.stationId,
    (value) => {
      nextTick(() => {
        init();
      });
    },
    {
      immediate: true,
    },
  );
  // 监听页面类型
  watch(
    () => props.activeKey,
    (value) => {
      if (value) {
        nextTick(() => {
          init();
        });
      }
    },
  );
  // 监听时间范围
  watch(
    () => props.dateRange,
    (value) => {
      if (value.length > 0) {
        nextTick(() => {
          init();
        });
      }
    },
    {
      immediate: true,
    },
  );
  const alarmTrendChart = ref();
  let dataArr = [
    {
      showDate: '00:01',
      urgentNum: 10,
      importantNum: 50,
      commonNum: 20,
      generalNum: 42,
    },
  ];
  let option = {};
  function setOptionData() {
    const x = dataArr.map((item) => item.showDate);
    const urgentNumList = dataArr.map((item) => item.urgentNum);
    const importantNumList = dataArr.map((item) => item.importantNum);
    const commonNumList = dataArr.map((item) => item.commonNum);
    const generalNumList = dataArr.map((item) => item.generalNum);
    option = {
      grid: {
        top: fontSize(30),
        left: fontSize(55),
        // right: 30,
        bottom: fontSize(40),
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(6,17,45,0.8)',
        borderColor: 'rgba(6,17,45,0.8)',
        axisPointer: {
          type: 'none',
          shadowStyle: {
            color: 'rgba(216, 230, 255, .2)',
          },
          label: {
            show: false,
            color: '#517FFD',
            backgroundColor: 'transparent',
            fontSize: fontSize(12),
          },
        },
        formatter: function (params) {
          var str = `<div><div style="color:rgba(226, 235, 250, 1);font-size:${fontSize(14)}px">${
            params[0].axisValue
          }</div>`;
          params.forEach((el) => {
            str += `<div style="display: flex;align-items: center;padding:${fontSize(
              3,
            )}px 0;border-radius: ${fontSize(
              8,
            )}px;color:rgba(226, 235, 250, 1);font-size:${fontSize(14)}px">
                <div style="width:${fontSize(6)}px;height:${fontSize(6)}px;margin-right: ${fontSize(
              7,
            )}px;background-color:${el.color}"></div>
                <span style="margin-right: ${fontSize(30)}px">${el.seriesName}</span>
                <span>${el.value}</span>
                </div>`;
          });
          str += '</div>';
          return str;
        },
      },
      dataZoom: [
        {
          type: 'inside',
          show: true,
          height: 15,
        },
      ],
      xAxis: {
        data: x,
        axisLine: {
          show: true, // 隐藏X轴轴线
          lineStyle: {
            type: 'dashed',
            color: 'rgba(7, 52, 141, 1)',
            width: fontSize(1),
          },
        },
        axisTick: {
          show: false, // 隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          margin: fontSize(10),
          textStyle: {
            color: 'rgba(228, 242, 255, 1)', // X轴文字颜色
            fontFamily: 'AlibabaPuHuiTi-2-55-Regular',
            fontSize: fontSize(14),
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(7, 52, 141, 1)',
          },
        },
      },
      yAxis: [
        {
          type: 'value',
          nameTextStyle: {
            color: 'rgba(138, 138, 138, 1)',
            padding: [0, fontSize(20), 0, 0],
            fontSize: fontSize(14),
          },
          minInterval: 1,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(7, 52, 141, 1)',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            margin: fontSize(12),
            textStyle: {
              color: 'rgba(228, 242, 255, 1)',
              fontFamily: 'AlibabaPuHuiTi-2-55-Regular',
              fontSize: fontSize(14),
              fontStyle: 'italic',
            },
          },
        },
      ],
      series: [
        {
          name: '紧急',
          type: 'line',
          symbolSize: 0,
          smooth: false,
          itemStyle: {
            color: 'rgba(255, 100, 148, 1)',
          },
          emphasis: {
            itemStyle: {
              color: '',
            },
          },
          data: urgentNumList,
          zlevel: 10,
        },
        {
          name: '重要',
          type: 'line',
          symbolSize: 0,
          smooth: false,
          itemStyle: {
            color: 'rgba(252, 169, 137, 1)',
          },
          emphasis: {
            itemStyle: {
              color: '',
            },
          },
          data: importantNumList,
          zlevel: 11,
        },
        {
          name: '一般',
          type: 'line',
          symbolSize: 0,
          smooth: false,
          itemStyle: {
            color: 'rgba(243, 255, 143, 1)',
          },
          emphasis: {
            itemStyle: {
              color: '',
            },
          },
          data: commonNumList,
          zlevel: 11,
        },
        {
          name: '普通',
          type: 'line',
          symbolSize: 0,
          smooth: false,
          itemStyle: {
            color: 'rgba(143, 255, 196, 1)',
          },
          emphasis: {
            itemStyle: {
              color: '',
            },
          },
          data: generalNumList,
          zlevel: 11,
        },
      ],
    };
  }
  /** 图表初始化 */
  function init() {
    defHttp
      .get({
        url: warnDayStatistic,
        params: {
          stationId: props.stationId,
          workAreaId: props.workAreaId,
          equipType: props.activeKey,
          beginTime: props.dateRange[0],
          endTime: props.dateRange[1],
        },
      })
      .then((res) => {
        if (res) {
          dataArr = res;
          setOptionData();
          let chart = echarts.init(alarmTrendChart.value);
          chart.setOption(option);
          const resizeObserver = new ResizeObserver(() => {
            chart.resize();
          });
          resizeObserver.observe(alarmTrendChart.value);
        }
      });
  }
</script>
<style lang="less" scoped>
  .alarm-trend-chart {
    width: 100%;
    height: 100%;
  }
</style>
